<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
		  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		
		<!-- 卡片视图区域 -->
		<el-card>
			<el-row>
				<el-col>
					<el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
				</el-col>
			</el-row>
			
			<!-- 表格 -->
			<tree-table class="treeTable" :data="catelist" :columns="columns" 
			:selection-type="false" :expand-type="false" :show-index="true" :border="true">
				<!-- 是否有效 -->
				<template slot="isok" slot-scope="scope">
					<i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color: lightgreen;"></i>
					<i class="el-icon-error" v-else style="color: lightgreen;"></i>	
				</template>
				<!-- 排序 -->
				<template slot="order" slot-scope="scope">
					<el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
					<el-tag type="success" size="mini" v-else-if="scope.row.cat_level===1">二级</el-tag>
					<el-tag type="warning" size="mini" v-else>三级</el-tag>
				</template>
				<!-- 排序 -->
				<template slot="opt" slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" size="mini" @click="showeditDialog(scope.row.cat_id)">编辑</el-button>
					<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeCateById(scope.row.cat_id)">删除</el-button>					
				</template>
			
					
			</tree-table>
			<!-- 分类 -->
			 <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="querInfo.pagenum"
			      :page-sizes="[3, 5, 10, 15]"
			      :page-size="querInfo.pagesize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>
		</el-card>
		
		<!-- 添加分类对话框 -->
		<el-dialog
		  title="添加分类"
		  :visible.sync="addCateDialogVisible"
		  width="50%"
		  @close="addCateDialogClosed">
		  <!-- 添加分类表单 -->
		 <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" >
		   <el-form-item label="分类名称:" prop="cat_name">
		     <el-input v-model="addCateForm.cat_name"></el-input>
		   </el-form-item>
		   <el-form-item label="父级分类:" >
			   <!-- options指定数据源 -->
				 <el-cascader 
					
					 expand-trigger="hover"
					 v-model="selectedKeys"
					 :options="parentCateList"
					 :props="cascaderProps"					 
					 @change="parentCateChanged"
					 clearable change-on-select>
				</el-cascader>
		   </el-form-item>
		   </el-form>
		   
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addCateDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addCate">确 定</el-button>
		  </span>
		</el-dialog>
		
		<!-- 编辑对话框 -->
		<el-dialog title="修改分类名称" :visible.sync="editDialogCate" width="50%" @close="editDialogClosed">
			<el-form :model="editForm" ref="editFormRef" label-width="70px" >
				<el-form-item label="角色名称" >
				  <el-input v-model="editForm.cat_name" ></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogCate=false">取消</el-button>
				<el-button type="primary" @click="editCateInfo">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				// 查询条件
				querInfo:{
					type:3,
					// 当前页码值
					pagenum:1,
					// 每页显示多少条数据
					pagesize:5,
					
				},
				// 对话框的隐藏显示
				editDialogCate:false,
				// 查询分类数据对象
				editForm:{},
				// 商品分类的数据列表，默认为空
				catelist:[],
				// 总数据条数
				total:0,
				// 为table指定列的定义
				columns:[
					{
					label:'分类名称',
					prop:'cat_name',
					
				},{
					label:'是否有效',
					// 表示将当前列定义为模板
					type:'template',
					// 表示当前这一列使用模板名称
					template:'isok'
				},
				{
					label:'排序',
					// 表示将当前列定义为模板
					type:'template',
					// 表示当前这一列使用模板名称
					template:'order'
				},
				{
					label:'操作',
					// 表示将当前列定义为模板
					type:'template',
					// 表示当前这一列使用模板名称
					template:'opt'
				}
				],
				// 控制分类对话框的显示与隐藏
				addCateDialogVisible:false,
				// 添加分类表单数据对象
				addCateForm:{
					// 将要添加的分类名称
					cat_name:'',
					// 父级分类id
					cat_pid:0,
					// 分类等级 1级分类
					cat_level:0,
					
				},
				// 添加分类表单的验证规则
				addCateFormRules:{
					cat_name:[
						 { required: true, message: '请输入分类名称', trigger: 'blur' },
					]
				},
				// 父级分类的列表
				parentCateList:[],
				// 指定级联选择器的配置对象
				cascaderProps:{
					value:'cat_id',
					label:'cat_name',
					children:'children'
				},
				// 选择父级分类的id数组
				selectedKeys:[]
			}
		},
		created() {
			this.getCatelist()
			
		},
		methods:{
			//获取商品分类数据
			async getCatelist(){
				const{ data:res} =await this.$http.get('http://127.0.0.1:8888/api/private/v1/categories',{params:this.querInfo})
				if(res.meta.status!==200){
					return this.$message.error('获取商品分类数据失败')
				}
				console.log(res.data)
				// 把数据列表赋值给catelist
				this.catelist=res.data.result
				// 把总数据条数赋予给total
				this.total=res.data.total
			},
			// 监听分页 pagesize 改变
			handleSizeChange(newSize){
				this.querInfo.pagesize=newSize
				this.getCatelist()
			},
			// 监听分页 pagenum 改变
			handleCurrentChange(newPage){
				this.querInfo.pagenum=newPage
				this.getCatelist()
			},
			showAddCateDialog(){
				// 先获取父级分类数据列表 在打开对话框
				this.getParentCateList()
				this.addCateDialogVisible = true
				
				
			},
			// 获取父级分类的数据列表
			async getParentCateList(){
				const{ data:res} =await this.$http.get('http://127.0.0.1:8888/api/private/v1/categories',{params:{type:2} })
					if(res.meta.status!==200){
						return this.$message.error('获取父级分类数据失败')	
					}	
						this.parentCateList=res.data
				},
			// 选择项发生变化触发这个函数
			parentCateChanged(){
				console.log(this.selectedKeys)
				// 如果selectedKeys 数组中length>0 选择父级分类
				if(this.selectedKeys.length>0){
					// 父级分类id
					this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
					// 为当前分类的等级赋值
					this.addCateForm.cat_level=this.selectedKeys.length
					return
				}else{
					// 父级分类id
					this.addCateForm.cat_pid=0
					// 为当前分类的等级赋值
					this.addCateForm.cat_level=0
				}
			},
			async addCate(){
				this.$refs.addCateFormRef.validate(async valid=>{
					if(!valid)return
					const{ data:res} =await this.$http.post('http://127.0.0.1:8888/api/private/v1/categories',this.addCateForm)
					if(res.meta.status!==201){
						return this.$message.error('添加分类失败')	
					}
						this.$message.success('添加分类成功')	
						this.getCatelist()
						this.addCateDialogVisible=false
				})
				
			},
			// 监听对话框关闭事件
			addCateDialogClosed(){
				this.$refs.addCateFormRef.resetFields()
				this.selectedKeys=[]
				this.addCateForm.cat_level=0
				this.addCateForm.cat_pid=0
			},
			// 展示编辑角色的对话框
			async showeditDialog(id){
				const{data:res}= await this.$http.get('http://127.0.0.1:8888/api/private/v1/categories/'+id)
				if(res.meta.status!==200){
					return this.$message.error('查询分类信息失败')
				}
				this.editForm=res.data
				this.editDialogCate=true
			},
			// 监听编辑用户对话框关闭
			editDialogClosed(){
				this.$refs.editFormRef.resetFields()
			},
			// 修改分类信息并提交
			editCateInfo(){
				this.$refs.editFormRef.validate(async valid=>{
					if(!valid) return
					// 发送修改请求
					const {data:res} =await this.$http.put('http://127.0.0.1:8888/api/private/v1/categories/'+this.editForm.cat_id,
					{
						cat_name:this.editForm.cat_name
					})
					if(res.meta.status!==200){
						return this.$message.error('修改分类信息失败')
					}
					// 关闭对话框
					this.editDialogCate=false
					// 刷新数据表
					this.getCatelist()
					// 提示成功
					this.$message.success('修改分类信息成功')
				})
			},
			// 根据id删除分类信息
			async removeCateById(id){
				// 弹出操作咨询用户是否删除角色
				const confirmResult=await this.$confirm('此操作将永久删除该角色,是否继续？','提升',{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err=>err)
				// 如果用户确删除，返回字符串为confirm
				// 如果用户取消删除，返回字符串cancel
				if(confirmResult !=='confirm'){
					return this.$message.info('已经取消删除')
				}
				const {data:res}=await this.$http.delete('http://127.0.0.1:8888/api/private/v1/categories/'+ id)
				if(res.meta.status!==200){
					return this.$message.error('删除角色失败')
				}
				// 提示修改成功
				this.$message.success('删除角色成功')
				// 刷新数据列表
				this.getCatelist()
			},	
			
		}
		
	}
</script>

<style lang="less" scoped>
	.treeTable{
		margin-top: 15px;
	}
	.el-cascader {
		width: 100%;
	}
	.el-cascader-panel {
		height: 200px;
	}
</style>
